<template>
  <div class="containers">
    <div class="canvas" ref="canvas"></div>
  </div>
</template>
<script>
  import BpmnViewer from 'bpmn-js/lib/Viewer'
  import { XmlStr } from '@/mock/XmlStr'

  export default {
    name: 'Viewer',
    mounted() {
      this.init()
    },
    data() {
      return {
        bpmnViewer: null,
        container: null,
        canvas: null
      }
    },
    methods: {
      init() {
        const canvas = this.$refs.canvas
        this.bpmnViewer = new BpmnViewer({
          container: canvas
        })

        this.createNewDiagram()
      },
      async createNewDiagram() {
        try {
          const result = await this.bpmnViewer.importXML(XmlStr)
          const { warnings } = result
          console.log(warnings)
        } catch (err) {
          console.log(err.message, err.warnings)
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .containers {
    background: #9e9e9e;
    overflow: auto;
    background-image: linear-gradient(90deg,
    rgba(220, 220, 220, 0.5) 6%,
    transparent 0),
    linear-gradient(rgba(192, 192, 192, 0.5) 6%, transparent 0);
    background-size: 12px 12px;
    width: 100%;
    height: calc(100vh - 82px);
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  }
</style>